<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		a {
			text-decoration: none;
		}
		li {
			list-style-type: none;
		}
		.list {
			background-color: red;
			float: left;
			padding: 0px 10px; 
		}
		.list ul {
			display: none;
		}
	</style>
	<script src="jquery-3.3.1.min.js"></script>
	<script>
		$(function(){
			// 获取ul中所有的li 注册鼠标进入和鼠标离开事件
			$(".wrap>ul>li").mouseenter(function(){
				// 获取li的子元素中的ul标签
				// show()==>display:block;
				$(this).children("ul").stop().show(300);
			});

			// 鼠标离开事件
			$(".wrap>ul>li").mouseleave(function(){
				// hide()==>display：none;
				$(this).children("ul").stop().hide(300);
			});

		});
	</script>
</head>
<body>
	<div class="wrap">
		<ul>
			<li class="list">
				<a href="javascript:void(0);">帅哥系列</a>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>
			<li class="list">
				<a href="javascript:void(0);">帅哥系列</a>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>
			<li class="list">
				<a href="javascript:void(0);">帅哥系列</a>
				<ul>
					<li>1</li>
					<li>2</li>
					<li>3</li>
				</ul>
			</li>
		</ul>
	</div>

	
</body>
</html>